<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :inline="true"
      :size="formSize"
      status-icon
    >
      <el-form-item label="工单编号" prop="WorkOrderNumber">
        <el-input v-model="ruleForm.workOrderNumber" style="width: 200px"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="工单名称" prop="WorkOrderName">
        <el-input v-model="ruleForm.workOrderName" style="width: 200px"  :disabled="true"/>
      </el-form-item><br/>
      <el-form-item label="关联计划" prop="RelevanceExplain">
        <el-input v-model="ruleForm.relevanceExplain" style="width: 200px"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="计划编号" prop="ExplainNumber">
        <el-input v-model="ruleForm.explainNumber" style="width: 200px"  :disabled="true"/>
      </el-form-item><br/>
      <el-form-item label="类型" prop="ExplainNumber">
        <el-input v-model="ruleForm.explainNumber" style="width: 200px"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="产品名称" prop="ProductName">
        <el-input v-model="ruleForm.productName" style="width: 200px"  :disabled="true"/>
      </el-form-item><br/>
      <el-form-item label="产品编号" prop="ProductNumber">
        <el-input v-model="ruleForm.productNumber" style="width: 200px"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="规格型号" prop="Specification">
        <el-input v-model="ruleForm.specification" style="width: 200px"  :disabled="true"/>
      </el-form-item><br/>
      <el-form-item label="产品类型" prop="ProductType">
        <el-input v-model="ruleForm.productType" style="width: 200px"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="单位" prop="Unit">
        <el-input v-model="ruleForm.unit" style="width: 200px"  :disabled="true"/>
      </el-form-item><br/>
      <el-form-item label="BOM" prop="name">
        <el-input v-model="ruleForm.bomNumber" style="width: 200px"  :disabled="true"/>
      </el-form-item>
      <el-form-item label="版本" prop="name">
        <el-input v-model="ruleForm.bomv" style="width: 200px"  :disabled="true"/>
      </el-form-item><br/>
      <el-form-item label="计划数量" prop="ExplainNum">
        <el-input v-model="ruleForm.explainNum" style="width: 200px" />
      </el-form-item>

      <el-form-item prop="ExplainStartDate" label="计划开工时间">
        <el-date-picker
          v-model="ruleForm.explainStartDate"
          type="date"
          label=""
          placeholder="请选择时间"
          style="width: 200px"
        />
      </el-form-item><br/>
      <el-form-item prop="ExplainEndDate" label="计划完工时间">
        <el-date-picker
          v-model="ruleForm.explainEndDate"
          type="date"
          label=""
          placeholder="请选择时间"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item prop="DemandDate" label="需求日期">
        <el-date-picker
          v-model="ruleForm.demandDate"
          type="date"
          placeholder="请选择时间"
          style="width: 200px"
        />
      </el-form-item><br/>
      <el-form-item label="备注" prop="desc">
        <el-input v-model="ruleForm.remark" type="textarea"   style="width: 530px"/>
      </el-form-item><br/>
      <el-form-item>
        <el-button type="primary" @click="submitForm()"> 确定 </el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>

    <!-------------------物料清单表格----------------->
    <div>
      <el-divider content-position="left">物料清单</el-divider>
    </div>
    <div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column property="id" label="序号" width="100" />
        <el-table-column property="materialnumber" label="物料编号" width="180" />
        <el-table-column property="name" label="物料名称" width="100" />
        <el-table-column property="specificationsversion" label="规格型号" width="100" />
        <el-table-column property="unit" label="单位" width="100" />
        <el-table-column property="usageamount" label="预计使用量" width="100" />
        <el-table-column property="useratio" label="用料比例" width="100" />
      </el-table>
    </div>
    <!-------------------工艺流程表格----------------->
    <div>
      <el-divider content-position="left">工艺流程</el-divider>
    </div>
    <div>
      <el-descriptions>
        <el-descriptions-item label="工艺路线名称："
          >{{ruleForm.routingName}}</el-descriptions-item
        >
        <el-descriptions-item label="工艺路线编号："
          >{{ruleForm.routingNumber}}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div>
      <el-button size="small" @click="handAdd">新增</el-button>
      <el-button size="small" @click="handUpt">编辑</el-button>
      <el-button size="small">删除</el-button>
      <el-tabs v-model="activeName">
      <el-tab-pane label="工序一" name="first">
         <el-table
        ref="multipleTableRef"
        :data="tableDataFirst"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >

        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" width="100" />
        <el-table-column property="missionnumber" label="任务编号" width="150" />
        <el-table-column property="taskname" label="任务名称" width="100" />
        <el-table-column property="sitename" label="站点名称" width="100" />
        <el-table-column property="stationnumber" label="站点编号" width="140" />
        <el-table-column property="plannedquantity" label="计划数量" width="100" />
        <el-table-column property="runplantdate" label="预计开工时间" width="120" >
          <template #default="scope">
          <span>{{ scope.row.runplantdate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="completedate" label="实际完工时间" width="120">
          <template #default="scope">
          <span>{{ scope.row.completedate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="actualproductiontime" label="任务颜色" width="100" />
      </el-table>
      </el-tab-pane>
      <el-tab-pane label="工序二" name="second">
        <el-table
        ref="multipleTableRef"
        :data="tableDataTwo"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >

        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" width="100" />
        <el-table-column property="missionnumber" label="任务编号" width="150" />
        <el-table-column property="taskname" label="任务名称" width="100" />
        <el-table-column property="sitename" label="站点名称" width="100" />
        <el-table-column property="stationnumber" label="站点编号" width="140" />
        <el-table-column property="plannedquantity" label="计划数量" width="100" />
        <el-table-column property="runplantdate" label="预计开工时间" width="120" >
          <template #default="scope">
          <span>{{ scope.row.runplantdate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="completedate" label="实际完工时间" width="120">
          <template #default="scope">
          <span>{{ scope.row.completedate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="actualproductiontime" label="任务颜色" width="100" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
        <el-button type="text" size="small" @click="MateLook(scope.$index, scope.row)"
          >查看物料</el-button
        >
      </template>
      </el-table-column>
      </el-table>
      </el-tab-pane>
      <el-tab-pane label="工序三" name="third">
        <el-table
        ref="multipleTableRef"
        :data="tableDataThree"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >

        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" width="100" />
        <el-table-column property="missionnumber" label="任务编号" width="150" />
        <el-table-column property="taskname" label="任务名称" width="100" />
        <el-table-column property="sitename" label="站点名称" width="100" />
        <el-table-column property="stationnumber" label="站点编号" width="140" />
        <el-table-column property="plannedquantity" label="计划数量" width="100" />
        <el-table-column property="runplantdate" label="预计开工时间" width="120" >
          <template #default="scope">
          <span>{{ scope.row.runplantdate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="completedate" label="实际完工时间" width="120">
          <template #default="scope">
          <span>{{ scope.row.completedate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="actualproductiontime" label="任务颜色" width="100" />
      </el-table>
      </el-tab-pane>
      <el-tab-pane label="工序四" name="fourth">
        <el-table
        ref="multipleTableRef"
        :data="tableDataFour"
        style="width: 100%"
        @selection-change="handleSelectionChange1"
      >

        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" width="100" />
        <el-table-column property="missionnumber" label="任务编号" width="150" />
        <el-table-column property="taskname" label="任务名称" width="100" />
        <el-table-column property="sitename" label="站点名称" width="100" />
        <el-table-column property="stationnumber" label="站点编号" width="140" />
        <el-table-column property="plannedquantity" label="计划数量" width="100" />
        <el-table-column property="runplantdate" label="预计开工时间" width="120" >
          <template #default="scope">
          <span>{{ scope.row.runplantdate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="completedate" label="实际完工时间" width="120">
          <template #default="scope">
          <span>{{ scope.row.completedate.substr(0,10) }}</span></template>
      </el-table-column>
        <el-table-column property="actualproductiontime" label="任务颜色" width="100" />
      </el-table>
      </el-tab-pane>
    </el-tabs>
    </div>
    <!-- -------------------表格结束----------------- -->
    <!-- -----------------弹出修改------------------- -->
    <el-dialog v-model="editVisible" title="编辑">
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item
          label="站点名称"
          :label-width="formLabelWidth"
          prop="TimeRuleId"
        >
          <el-select v-model="form.processname" placeholder="--请选择--">
            <el-option label="工序一" value="工序一" />
            <el-option label="工序二" value="工序二" />
            <el-option label="工序三" value="工序三" />
            <el-option label="工序四" value="工序四" />

          </el-select>
        </el-form-item>
        <el-form-item label="任务编号" :label-width="formLabelWidth">
          <el-input v-model="form.missionnumber" autocomplete="off"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="任务名称" :label-width="formLabelWidth">
          <el-input v-model="form.taskname" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="站点名称"
          :label-width="formLabelWidth"
          prop="TimeRuleId"
        >
          <el-select v-model="form.sitename" placeholder="--请选择--">
            <el-option label="站点一" value="站点一" />
            <el-option label="站点二" value="站点二" />
            <el-option label="站点三" value="站点三" />
            <el-option label="站点四" value="站点四" />

          </el-select>
        </el-form-item>
        <el-form-item
          label="站点编号"
          :label-width="formLabelWidth"
          prop="targetForm"
        >
          <el-input
            v-model="form.stationnumber"
            autocomplete="off"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="任务颜色" :label-width="formLabelWidth">
          <el-input v-model="form.codingProd" autocomplete="off" />
        </el-form-item>
        <el-form-item label="计划数量" :label-width="formLabelWidth">
          <el-input v-model="form.plannedquantity" autocomplete="off" />
        </el-form-item>
        <el-form-item label="开工时间" :label-width="formLabelWidth">
          <el-date-picker
        v-model="form.runplantdate"
        type="date"
        placeholder="开工时间"
        :size="size"
      />
        </el-form-item>
        <el-form-item label="完工时间" :label-width="formLabelWidth">
          <el-date-picker
        v-model="form.completedate"
        type="date"
        placeholder="完工时间"
        :size="size"
      />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- -----------------弹出修改结束--------------- -->
  </div>
</template>
<script>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import{GetId,GetMate,GetRoute,ProductRoutAdd,GetFour,GetThree,GetTwo,GetFirst} from "../../api/ProductWork"
export default {
  setup() {
    const rules = {};
    const ruleFormRef = ref(null);
    const ruleForm = reactive({});
    const activeName = ref('first')
    // 提交
    const submitForm = () => {};
    // 重置
    const resetForm = () => {};
    let form = reactive({

    });
    const query = reactive({});
    //物料
    const tableData = ref([]);
    //工艺
    const tableDataFirst = ref([]);
    const tableDataTwo = ref([]);
    const tableDataThree = ref([]);
    const tableDataFour = ref([]);
   
    // 查询操作
    const handleSearch = () => {
      query.codingName = formInline.codingName;
      getData();
    };
    //查询
    const formInline = reactive({});
    const handAdd = () => {
      editVisible.value = true;
    };
    const route = useRoute();
    //反填
    const GetIds=()=>{
      GetId(route.query.id).then((item) => {
        Object.assign(ruleForm, item.result);
      });
    }
    GetIds();
     // 物料清单
     const getData = () => {
      GetId(route.query.id).then((res) => {
        tableData.value=res.result.billOfMaterials
      });
    };
    getData();
     // 工序一
     const GetListRouteFirst = () => {
      GetFirst(query).then((res) => {
        tableDataFirst.value=res.result
      });
    };
    GetListRouteFirst();
    // 工序二
    const GetListRouteTwo = () => {
      GetTwo(query).then((res) => {
        tableDataTwo.value=res.result
      });
    };
    GetListRouteTwo();
    // 工序三
    const GetListRouteThree = () => {
      GetThree(query).then((res) => {
        tableDataThree.value=res.result
      });
    };
    GetListRouteThree();
    // 工序四
    const GetListRouteFour = () => {
      GetFour(query).then((res) => {
        tableDataFour.value=res.result
      });
    };
    GetListRouteFour();
    const handUpt = () => {
      editVisible.value = true;
    };
    const saveEdit=()=>{
      editVisible.value = false;
      form.workordernumber=ruleForm.workOrderNumber
      form.processNumber=ruleForm.routingNumber
      ProductRoutAdd(form).then((res)=>{
        if(res.result>0)
        {
          
          ElMessage.success("操作成功")
          GetListRouteFour();
          GetListRouteThree();
          GetListRouteTwo();
          GetListRouteFirst();
        }
        else{
          ElMessage.error("操作失败")
        }
      })
    }
    //查看物料
    const MateLook=()=>{

    }
    const GX1 = () => {
      handleSelectionChange1.value = true;
    };
    const GX2 = () => {
      handleSelectionChange1.value = true;
    };
    const GX3 = () => {
      handleSelectionChange1.value = true;
    };
    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    return {
      rules,
      ruleFormRef,
      ruleForm,
      submitForm,
      resetForm,
      query,
      tableData,
      tableDataFour,
      tableDataThree,
      tableDataTwo,
      tableDataFirst,
      editVisible,
      useRoute,
      handAdd,
      handUpt,
      GX1,
      GX2,
      GX3,
      handleSearch,
      GetIds,
      form,
      activeName,
      GetListRouteFirst,
      GetListRouteFour,
      GetListRouteThree,
      GetListRouteTwo,
      getData,
      saveEdit,
      MateLook
    };
  },
};
</script>
  